<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link th:href="@{/bootsrap/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/mystyle.css}" rel="stylesheet">
    <script th:src="@{/jquery/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/jquery/bootstrap.min.js}"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style rel="stylesheet" type="text/css">
        .layui-table img{
            max-width:100px;
        }
        .layui-table-cell{
            height:50px;
            line-height: 50px;
        }
        body{
            height: 13500px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div th:replace="~{commons/bar::topbar(activeUri='admin')}"></div>
<div>
    <!--<h1 style="color: #2e6da4">视频展示</h1>-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend><h1 style="color: #2e6da4">视频展示</h1></legend>
    </fieldset>
    <hr style="height: 5px;background-color:pink"/>

    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input name="id" class="layui-input" id="id" autocomplete="off">
        </div>
        用户名：
        <div class="layui-inline">
            <input name="viewName" class="layui-input" id="viewName" autocomplete="off">
        </div>
        <button class="layui-btn layui-btn-radius" data-type="reload">搜索</button>
    </div>

    <!-- 修改用户信息模态框（Modal） -->
    <div class="modal fade" id="editViewInfoModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改视频信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="viewForm" role="form" method="get">
                        <input type="text" name="id" id="vid" hidden>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">视频名字</label>
                            <div class="col-sm-10">
                                <input type="text" name="viewName" id="name" class="form-control" placeholder="请输入视频名字">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="viewUrl" class="col-sm-2 control-label">视频连接</label>
                            <div class="col-sm-10">
                                <input type="text" name="viewUrl" class="form-control" id="viewUrl" placeholder="请输入视频连接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="imgUrl" class="col-sm-2 control-label">图片连接</label>
                            <div class="col-sm-10">
                                <input type="text" name="imgUrl" class="form-control" id="imgUrl" placeholder="请输入图片连接">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" data-dismiss="modal" class="btn btn-default">返回</button>
                                <button type="button" class="btn btn-default" onclick="editViewInfo()">修改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 删除用户信息模态框（Modal） -->
    <div class="modal fade" id="deleteViewInfoModel" tabindex="-1" role="dialog" aria-labelledby="deleteViewInfoModel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">删除视频</h4>
                </div>
                <div class="modal-body">
                    <form method="get">
                        <input type="text" name="id" id="id" hidden>
                        <div class="form-group">
                            <label class="control-label">确定要删除该视频？</label>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>

                            <button type="button" class="btn btn-primary" onclick="deleteView()">确认</button>
                        </div>

                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>



    <table class="layui-hide" id="viewInfo" style="align-content: center" lay-filter="editView"></table>
    <script src="/layui/layui.all.js"></script>

    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#viewInfo'
                , url: 'http://localhost:8082/admin/selectViewWithPage'
                ,height:15000
                , cols:
                    [
                        [
                            {field: 'id', width: 180, id: 'id', title: 'ID', sort: true}
                            , {field: 'imgUrl', width: 260, id: 'imgUrl', title: '图片连接',templet:'<div><img src="{{d.imgUrl}}" style="width: 220px;height: 220px"></div>',align: "center"}
                            , {field: 'viewName', width: 220, id: 'viewName', title: '视频名', sort: 'true',align: "center"}
                            , {field: 'viewUrl', width: 220, id: 'viewUrl', title: '视频连接',align: "center"}
                            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 160,align: "center"}
                        ]
                    ]
                , id: 'testReload'
                , page: true


            });

            var $ = layui.$, active = {
                reload: function () {
                    var id = $('#id');
                    var viewName = $('#viewName');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            id: id.val(),
                            viewName: viewName.val()
                        }
                    }, 'data');
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听行单击事件（双击事件为：rowDouble）
            table.on('tool(editView)', function (obj) {
                var data = obj.data;
                var id = data['id'];
                var viewName = data['viewName'];
                var viewUrl = data['viewUrl'];
                var imgUrl = data['imgUrl'];
                $("#vid").val(id);
                $("#name").val(viewName);
                $("#viewUrl").val(viewUrl);
                $("#imgUrl").val(imgUrl)

                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });

        });

    </script>
    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-xs" lay-event="edit" data-toggle="modal" data-target="#editViewInfoModel">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" data-toggle="modal" data-target="#deleteViewInfoModel"
           lay-event="del">删除</a>
    </script>

    <script>
        function editViewInfo() {

            $.post("/admin/editViewInfoById",
                $("#viewForm").serialize(),
                function (data) {
                    if (data == "OK") {
                        alert("商品信息更新成功！");
                        window.location.reload();
                    } else {
                        alert("商品信息更新失败！");
                        window.location.reload();
                    }
                }
            )

        }

        function deleteView() {
            var id=document.getElementById("vid").value;
            $.post("/admin/deleteView",
                {
                    id:id
                },
                function (data) {
                    if (data == "OK") {
                        alert("商品信息更新成功！");
                        window.location.reload();
                    } else {
                        alert("商品信息更新失败！");
                        window.location.reload();
                    }
                }
            )
        }
    </script>

</div>
</body>
</html>